<template>
	<!-- 电梯管理 添加/编辑/详情 -->
	<div class="compile">
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow">
			<el-form :model="form" ref="form" v-loading='isLoading'>
				<el-row>
					<div class="textLeft titleMessNow">电梯信息</div>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="电梯简称:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.liftName" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="电梯注册码:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.liftRescode" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="电梯型号:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.liftModel" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="电梯工号:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.liftJobNum" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="维保单位:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.mainCompany" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="使用单位:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.userCompany" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 保养工单历史 -->
				<el-row>
					<div class="textLeft titleMessNow">保养工单列表</div>
				</el-row>
				<div class="tableBox">
					<!-- <vueScroll> -->
						<el-table :data="tableData" highlight-current-row ref="moviesTable" style="width: 100%" v-loading='tableLoading'>
							<el-table-column type="index" class="over" fixed>
							</el-table-column>
							<el-table-column label="工单编码" min-width="150">
								<template slot-scope="scope">
									<el-button @click="lookDetail(scope.$index, scope.row)"><span style="color: #409EFF;">{{scope.row.sn}}</span></el-button>
								</template>
							</el-table-column>
							<el-table-column label="工单状态">
								<template slot-scope="scope">
									<el-tag size="medium">
										<div :style="{color:scope.row.statusColor}">
											{{scope.row.status}}
										</div>
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="维保人员">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.maintain_person" placement="top">
										<span class="speSpan">{{scope.row.maintain_person}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="维保日期">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.day" placement="top">
										<span class="speSpan">{{scope.row.day}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="完成时间">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.task_end_time" placement="top">
										<span class="speSpan">{{scope.row.task_end_time}}</span>
									</el-tooltip>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页器 -->
						<div class="pag">
							<el-pagination :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
							 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
							</el-pagination>
						</div>
					<!-- </vueScroll> -->
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close(2)">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
			</div>
		</el-dialog>
		<transition name='el-fade-in'>
			<orderDetail v-if='detailShow' :detailShow='detailShow' :rowId='rowId' @maskShow="maskShowNow"></orderDetail>
		</transition>
	</div>
</template>

<script>
	import {
		axiosPost,
		axiosGet,
		loadFn,
		axiosChange,
	} from "@/common.js"
	import orderDetail from "@/components/ElevatorMaintenance/MainPlan/orderDetail.vue"
	export default {
		props: ['addAndCompileShow', 'isAddOrComp', 'rowId1'],
		mounted() {
			if (this.title == '添加维保历史') {
				this.isLoading = false
			}
		},
		components: {
			orderDetail,
		},
		data() {
			return {
				formLabelWidth: '120px',
				form: {
					liftName: '',
					liftRescode: '',
					liftModel: '',
					liftJobNum: '',
					mainCompany: '',
					userCompany: '',
				},
				ensureBtn: false,
				isLoading: true,
				tableData: [],
				page: 1,
				page_size: 5,
				total: 0,
				tableLoading: false,
				detailShow: false,
				detailId: '',
				rowId:''
			}
		},
		computed: {
			detailDisable() {
				if (this.title == '维保历史详情') {
					return true
				} else {
					return false
				}
			},
			title() {
				if (this.isAddOrComp == 1) {
					return '添加维保历史'
				} else if (this.isAddOrComp == 2) {
					this.getCompileList()
					return '编辑维保历史'
				} else {
					this.getCompileList()
					return '维保历史详情'
				}
			},
		},
		methods: {
			//详情关闭
			maskShowNow(isShow) {
				this.detailShow = isShow
			},
			//获取表格列表数据
			getTableList() {
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					key_words: this.form.liftRescode
				}
				axiosGet('/maintain/task/history/list', params, (res) => {
					this.tableLoading = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							if (item.status == "未开始") {
								item.statusColor = "#409EFF"
							} else if (item.status == "已超期") {
								item.statusColor = "#F56C6C"
							} else if (item.status == "进行中") {
								item.statusColor = "#909399"

							} else if (item.status == "完成(未确认)") {
								item.statusColor = "#E6A23C"
							} else if (item.status == "完成(已确认)") {
								item.statusColor = "#67C23A"
							} else if (item.status == "迁移中") {
								item.statusColor = "#9F35FF"
							}
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//查看工单详情
			lookDetail(index, row) {
				console.log(index, row)
				this.rowId = row.id
				this.detailShow = true
			},
			//每页数量变化
			handleSizeChange(size) {
				this.page_size = size
				this.tableLoading = true
				this.getTableList()
			},
			//页数变化
			handleCurrentChange(page) {
				this.page = page
				this.tableLoading = true
				this.getTableList()
			},
			//获取编辑列表
			getCompileList() {
				let rowId = this.rowId1
				let url = '/maintain/task/history/' + rowId + '/'
				axiosGet(url, {}, (res) => {
					console.log(res)
					this.isLoading = false
					if (res.code == 0) {
						this.form.liftName = res.detail.elevator_name
						this.form.liftRescode = res.detail.register_code
						this.form.liftModel = res.detail.elevator_model
						this.form.liftJobNum = res.detail.elevator_no
						this.form.mainCompany = res.detail.maintain_company_name
						this.form.userCompany = res.detail.property_company_name
						this.getTableList()
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//提交
			submit(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						this.ensureBtn = true
						if (this.isAddOrComp == 1) {
							this.oprationUintPub(1)
						} else {
							this.oprationUintPub(2)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//关闭
			close(value) {
				let newValue = 2
				if (value) {
					newValue = value
				}
				this.$emit('detailMaskShow', newValue)
			},
		}
	}
</script>
<style scoped lang="less">
</style>
